<template>
	<view class="page-share">
		<!-- 导航栏 开始 -->
		<view class="page-tab">
			<tab-nav :tab-cur="TabCur" :tab-list="tabList" :is-show-menu="false" @tabSelect="tabSelect" :cus-padding="32"></tab-nav>
		</view>
		<!-- 导航栏 结束 -->

		<!-- 内容 开始 -->
		<scroll-view scroll-y="true" @scrolltolower="scrolltolower" style="height: calc(100% - 90rpx)">
			<!-- 直播 开始 -->
			<view class="cu-card custom-card-live grid col-2 padding-lr-xs">
				<block v-for="(item,index) of list" :key="index">
					<view class="content-list padding-lr-xs padding-bottom-sm" @click="showDetail(item)">
						<view class="content-item bg-white">
							<view class="img-box-bg">
								<image :src="item.img" mode="aspectFill" style="height:100%" />
							</view>
							<view class="bg-shadeTop custom padding-lr-sm padding-top padding-bottom-xl flex text-xs">
								<view>
									<view v-if="TabCur===0">
										<text class="cuIcon cuIcon-all"/>
										<text class="margin-left-xs">
											直播中 {{item.view_num}}人观看
										</text>
									</view>
									<view v-else-if="TabCur===1">
										<text class="cuIcon cuIcon-all"/>
										<text class="margin-left-xs">
											{{item.starttime_man}}
										</text>
									</view>
									<view v-else-if="TabCur===2">
										<text class="cuIcon cuIcon-all"/>
										<text class="margin-left-xs">
											已结束 查看回放
										</text>
									</view>
								</view>
							</view>
							<view class="bg-shadeBottom custom padding-lr-sm padding-bottom padding-top-xl flex flex-direction justify-between">
								<view class="text-sm text-cut" style="min-width: 0;">{{item.title}}</view>
								<view class="flex justify-between align-center margin-top-sm text-xs">
									<view class="flex justify-start align-center">
										<image class="cu-avatar custom round margin-right-xs" :src="item.avatar" />
										<view>{{item.nickname}}</view>
									</view>
									<view class="flex justify-start align-center">
										<view></view>
										<view class="margin-left-xs">{{item.like_num}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<!-- 直播 结束 -->
		</scroll-view>
		<!-- 内容 结束 -->
	</view>
</template>

<script>
	import tabNav from '@/components/TabNav'
	import profileMixin from "@/mixins/profile"
	import {mapMutations} from "vuex"
	export default {
		mixins: [profileMixin],
		components: {
			tabNav
		},
		data() {
			return {
				TabCur: 0,
				list: [],
				listUnStart:{
					total:0
				},
				listNow:{
					total:0
				},
				listEnd:{
					total:0
				},
				isMore:true,
				query:{
					page: 1,
					size: 10,
					lives_type:""
				}
			};
		},
		computed: {
			tabList() {
				return [`正在播${this.listNow.total}`, `预告${this.listUnStart.total}`, `回放${this.listEnd.total}`]
			},
		},
		methods: {
			async tabSelect(index) {
				this.query.page=1
				switch (index) {
					case 0:
						this.listNow = await this.getList(0)
						this.list = this.listNow.data;
						this.TabCur = index
						break;
					case 1:
						this.listUnStart = await this.getList(1)
						this.list = this.listUnStart.data;
						this.TabCur = index
						break;
					case 2:
						this.listEnd = await this.getList(2);
						this.list = this.listEnd.data
						this.TabCur = index
						break;
					default:
						""
				}
			},
			async getList(index) {
				let lives_type = 0
				switch (index) {
					case 0:
						lives_type = 2;
						break;
					case 1:
						lives_type = 1;
						break;
					case 2:
						lives_type = 3;
						break;
					default:
						""
				}
				this.query.lives_type=lives_type
				let query=this.$h.utils.deepClone(this.query)
				let {
					data
				} = await this.$h.api.userModel.getLives(query)
				this.isMore=data.data.length===this.query.size
				return data
			},
			showDetail(item) {
				switch (this.TabCur) {
					case 0:
						this.getPusherInfo();
						break;
					case 1:
						this.getPusherInfo();
						break;
					case 2:
						if(item.replays.length){
							this.$h.router.push({
								path: '/pages/video/videoReplay/videoReplay',
								params:{
									id:item.replays[0].id
								}
							});//回放
						}
						else{
							this.$h.toast("暂无回放")
						}
						
						break;
					default:
						""
				}
			},
			async getPusherInfo(){
				let {code,msg,data} = await this.$h.api.liveModel.getLive()
				if(data.status===2){
					this.SET_LIVEPUSHER(data.data)
					this.$h.router.push({
						path: '/pages/publish/liveInfo/liveInfo',
						params:{
							state:2
						}
					})
				}else{
					this.$h.toast(data.msg)
				}
			},
			async scrolltolower(){
				if(this.isMore){
					this.query.page++
					let data=await this.getList(this.TabCur)
					this.list=[...this.list,...data.data]
				}
			},
			...mapMutations('live',['SET_LIVEPUSHER'])
		},
		onLoad() {
			this.$h.showLoading()
			Promise.all([this.getList(0), this.getList(1), this.getList(2)]).then(res => {
				this.$h.hideLoading()
				this.listNow = res[0]
				this.listUnStart = res[1]
				this.listEnd = res[2]
				this.list = this.listNow.data
			})
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.page-share {
		height: 100%;

		.cu-card {
			padding-top: 20rpx;

			.cu-item.custom-margin {
				margin: 20rpx;
				overflow: hidden;
			}
		}

		.content-list {
			height: 520rpx;

			.content-item {
				width: 100%;
				height: 100%;
				border-radius: 14rpx;
				overflow: hidden;
				position: relative;

				.cu-avatar.custom {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.cu-card.custom-card-short,
		.cu-card.custom-card-live {
			padding-top: 40rpx;
		}
	}
</style>
